<template>
  <view class="container">


    <myLoading v-if="isLoading"></myLoading>

    <template v-else>
      <!-- 设置列表 -->
      <view class="setting-list">
        <!-- 第一组设置 -->
        <view class="setting-group">
          <view class="setting-item" @click="navigateTo('account')">
            <view class="setting-text">账号与安全</view>
            <view class="setting-arrow">></view>
          </view>

          <view class="setting-item" @click="navigateTo('personalInfo')">
            <view class="setting-text">个人信息管理中心</view>
            <view class="setting-arrow">></view>
          </view>
        </view>

        <!-- 第二组设置 -->
        <view class="setting-group">
          <view class="setting-item" @click="navigateTo('agreement')">
            <view class="setting-text">服务协议及个人信息处理规则</view>
            <view class="setting-arrow">></view>
          </view>

          <view class="setting-item" @click="navigateTo('serviceNotes')">
            <view class="setting-text">服务须知</view>
            <view class="setting-arrow">></view>
          </view>
        </view>

        <!-- 第三组设置 -->
        <view class="setting-group">
          <view class="setting-item" @click="navigateTo('emergencyContact')">
            <view class="setting-text">紧急联系人</view>
            <view class="setting-arrow">></view>
          </view>

          <view class="setting-item" @click="navigateTo('payment')">
            <view class="setting-text">支付设置</view>
            <view class="setting-arrow">></view>
          </view>



          <view class="setting-item" @click="navigateTo('navigation')">
            <view class="setting-text">导航设置</view>
            <view class="setting-arrow">></view>
          </view>
        </view>

        <!-- 第四组设置 -->
        <view class="setting-group">
          <view class="setting-item" @click="navigateTo('generalConfig')">
            <view class="setting-text">通用配置</view>
            <view class="setting-arrow">></view>
          </view>

          <view class="setting-item">
            <view class="setting-text">聊天消息自动语音播报</view>
            <switch class="setting-switch" :checked="true" color="#fb7c2f"></switch>
          </view>
        </view>

        <!-- 第五组设置 -->
        <view class="setting-group">
          <view class="setting-item" @click="navigateTo('infoCollection')">
            <view class="setting-text">个人信息收集清单</view>
            <view class="setting-arrow">></view>
          </view>

          <view class="setting-item" @click="navigateTo('thirdPartyShare')">
            <view class="setting-text">第三方共享信息清单</view>
            <view class="setting-arrow">></view>
          </view>

          <view class="setting-item" @click="navigateTo('infoSummary')">
            <view class="setting-text">个人信息处理规则摘要</view>
            <view class="setting-arrow">></view>
          </view>

          <view class="setting-item" @click="navigateTo('driverInfo')">
            <view class="setting-text">滴滴车主个人信息处理规则</view>
            <view class="setting-arrow">></view>
          </view>


        </view>

        <!-- 第六组设置 -->
        <view class="setting-group">
          <view class="setting-item" @dblclick="goimageP" @click="navigateTo('contactUs')">
            <view class="setting-text">联系我们</view>
            <view class="setting-arrow">></view>
          </view>

          <view class="setting-item" @dblclick="goToShezhi" @click="navigateTo('contactUs')">
            <view class="setting-text">关于</view>
            <view class="setting-arrow">></view>
          </view>
        </view>

        <!-- 退出按钮 -->
        <view class="logout-container">
          <button class="logout-button" @click="logout">退出</button>
        </view>
      </view>

    </template>

  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可以在这里添加需要的数据
      isLoading: true
    }
  },
  onShow() {
    // 页面显示时的处理逻辑
  },
  onLoad() {
    // 定义一个0.3-1的随机数
    let randomNum = Math.random() * 0.7 + 0.3;
    // 转换为毫秒
    let randomDelay = randomNum * 1000;
    // 延迟执行
    setTimeout(() => {
      setTimeout(() => {
        this.isLoading = false
      }, randomDelay)
    })
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    goUpdate() {
      // 根据不同证件类型跳转到不同的更新页面
      uni.navigateTo({
        url: '/pages/loading/loading'
      })
    },
    // 导航到其他页面
    navigateTo(page) {
      // 这里可以根据page参数导航到不同的页面
      uni.navigateTo({
        url: '/pages/loading/loading'
      })
      // 实际项目中可以使用uni.navigateTo实现页面跳转
      // uni.navigateTo({ url: '/pages/xxx/xxx' });
    },

    // 跳转到设置页面
    goToShezhi() {
      uni.navigateTo({
        url: '/pages/shezhi/shezhi'
      });
    },
    goimageP() {
      uni.navigateTo({
        url: '/pages/goimage/goimage'
      });
    },

    // 退出登录
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 执行退出登录操作
            console.log('用户确定退出登录');
            // 可以清除本地存储的用户信息
            // uni.removeStorageSync('userInfo');
            // 跳转到登录页面
            // uni.redirectTo({ url: '/pages/login/login' });
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background-color: #ffffff;
  padding: 0 16px;
  border-bottom: 1px solid #eeeeee;
}

.back-button {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 18px;
  color: #333333;
}

.navbar-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
}

.navbar-right {
  width: 40px;
}

/* 设置列表 */
.setting-list {
  padding: 10px 0;
}

.setting-group {
  margin-bottom: 10px;
  background-color: #ffffff;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-left {
  display: flex;
  align-items: center;
}

.setting-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.setting-text {
  font-size: 14px;
  color: #333333;
}

.setting-arrow {
  font-size: 12px;
  color: #cccccc;
}

.setting-switch {
  transform: scale(0.8);
}

/* 退出按钮 */
.logout-container {}

.logout-button {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  color: #fb7c2f;
  font-size: 16px;
  border: none;
  border-radius: 0;
  line-height: 50px;
  font-weight: 500;
}
</style>
